<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    function fetchData(callback) {
        setTimeout(() => {
            callback("数据加载完成");
        }, 1000);
    }

    function fetchDataSync() {
        fetchData(result => {
            console.log(result);  // 输出 "数据加载完成"
        });
    }

    fetchDataSync();
    // fetchData 接收一个回调函数 callback，该回调在异步操作完成后执行。
    // 回调函数确保了异步操作按顺序执行。
    // 缺点：回调函数可能导致 "回调地狱"，尤其是在多个嵌套异步操作时。
</script>
</html>